<template>
  <view class="container">
    <view class="header">
     <up-navbar
                 title="学习资料"
                 :autoBack="true"
             >
             </up-navbar>
    </view>
	<view class="tabs">
	  <up-tabs :list="list[0]"  class="tabs-t"></up-tabs>
	  <up-tabs :list="list[1]"  class="tabs-f"></up-tabs>
	  <up-tabs :list="list[2]"  class="tabs-p"></up-tabs>
	</view>
    <view class="categories">
      <block v-for="(category, index) in categories" :key="index">
        <view class="category-item">
			<view>
			<image :src="category.image" mode="" style="width: 76px; height: 100px;"></image>
			</view>
			<view class="category-box">
          <view class="category-title">{{ category.title }}</view>
          <view class="category-content">
            <view class="item" v-for="(item, idx) in category.items" :key="idx">{{ item }}</view>
          </view>
         </view>
        </view>
      </block>
    </view>
  </view>
</template>

<script setup>
	import { reactive } from 'vue';  
	  
	// 创建响应式数据  
	const list = reactive([    
	    [ {name: '推荐'} ],  
	    [ {name: '分类'} ],  
	    [ {name: '排行'} ]
	]);  
	
     const categories = reactive([
        { title: '前端', items: ['CSS权威指南（第三版）', '精通CSS', 'XXXXXXXX'], image: '/static/图片/前端.png' },
        { title: '后端', items: ['XXX', 'XXXXXX', 'XXXXXXX'], image: '/static/图片/后端.png' },
        { title: '工具', items: ['XXX', 'XXXXXX', 'XXXXXXX'], image: '/static/图片/工具.png' },
        { title: '实习', items: ['XXX', 'XXXXXX', 'XXXXXXX'], image: '/static/图片/实习.png' },
        { title: '面经', items: ['XXX', 'XXXXXX', 'XXXXXXX'], image: '/static/图片/面经.png' },
        { title: 'go语言', items: ['XXX', 'XXXXXX', 'XXXXXXX'], image: '/static/图片/go语言.png' }
      ]) 
    
</script>
<style scoped lang="scss">
.container {
  padding: 10px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f8f8f8;
  padding: 10px;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.tabs {
  display: flex;
  margin-top: 8%;
  width: 100%;
}
   .tabs-t { margin-right: auto; }  /* 左对齐 */
   .tabs-f { margin: 0 auto; }      /* 居中 */
   .tabs-p { margin-left: auto; }   /* 右对齐 */


.categories {
   margin-top: 20px;
}

.category-item {
  display: flex;
  flex-direction: row;
  margin-bottom: 20px;
}
.category-box {
	flex: 1;
	margin-left: 10px;
	padding: 6px;
	
}

.category-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 6px;
}

.category-content {
	.item {
		font-size: 12px;
		margin-bottom: 5px;
	}

}

.category-image {
  width: 100%;
  height: auto;
  border-radius: 5px;
}
</style>
